/* eslint-disable no-unused-vars */
import React, { useState } from 'react'
import {
  Avatar,
  Menu,
  MenuList,
  MenuItem,
  Dialog,
  DialogTitle,
  DialogContentText,
  DialogActions,
  Button,
  Typography,
  Accordion,
  AccordionSummary,
  AccordionDetails,
  DialogContent,
  ListItemText,
  Divider,
  Alert,
} from '@material-ui/core'
import CancelIcon from '@material-ui/icons/Cancel'
import DehazeIcon from '@material-ui/icons/Dehaze'
import FormatIndentDecreaseIcon from '@material-ui/icons/FormatIndentDecrease'
import FormatIndentIncreaseIcon from '@material-ui/icons/FormatIndentIncrease'
import BrightnessLowIcon from '@material-ui/icons/BrightnessLow'
import { makeStyles, createStyles, withStyles } from '@material-ui/core/styles'
import { HeaderTabs } from '@/components'
import { useHistory } from 'react-router-dom'
import { AlertTitle } from '@material-ui/lab'
import Slide from '@material-ui/core/Slide'

const Transition = React.forwardRef(function Transition(props, ref) {
  return <Slide direction='up' ref={ref} {...props} />
})

const StyledMenu = withStyles({
  paper: {
    border: '1px solid #d3d4d5',
  },
})((props) => (
  <Menu
    // elevation={0}
    getContentAnchorEl={null}
    anchorOrigin={{
      vertical: 'bottom',
      horizontal: 'center',
    }}
    transformOrigin={{
      vertical: 'top',
      horizontal: 'center',
    }}
    {...props}
  />
))

const StyledMenuItem = withStyles((theme) => ({
  root: {
    '&:focus': {
      backgroundColor: theme.palette.common.white,
      '& .MuiListItemText-primary': {
        color: 'rgba(0, 0, 0, 0.65)',
      },
    },
    '&:hover': {
      backgroundColor: theme.palette.primary.main,
      '& .MuiListItemText-primary': {
        color: theme.palette.common.white + ' !important',
      },
    },
    '& .MuiListItemText-primary': {
      fontSize: '16px !important',
    },
  },
}))(MenuItem)

const useStyles = makeStyles((theme) =>
  createStyles({
    header: {
      backgroundColor: '#3c8dbc',
      position: 'relative',
      minHeight: '50px',
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    headerLeft: {
      display: 'flex',
    },
    menuBtn: {
      margin: '15px 15px 5px 20px',
      fontSize: '14px',
      fontWeight: 'bold',
      color: '#fff',
      cursor: 'pointer',
    },
    headerLeftItemAction: {
      fontWeight: 'bold',
      background: 'rgba(0, 0, 0, 0.1)',
      color: '#f6f6f6',
      borderRadius: '4px 4px 0 0',
      padding: '10px 15px',
      display: 'flex',
      alignItems: 'center',
    },
    headerLeftItem: {
      fontWeight: 'bold',
      cursor: 'pointer',
      color: '#fff',
      padding: '10px 15px',
      marginLeft: '2px',
      display: 'flex',
      alignItems: 'center',
      '&:hover': {
        background: 'rgba(0, 0, 0, 0.1)',
        color: '#f6f6f6',
        borderRadius: '4px 4px 0 0',
      },
    },
    headerLeftItemIcon: {
      fontSize: '16px',
      marginRight: '5px',
    },
    headerRight: {
      display: 'flex',
    },
    headerLeftItemAvatar: {
      display: 'flex',
      alignItems: 'center',
      fontWeight: 'bold',
      color: '#f6f6f6',
      padding: '10px 15px 10px',
      '&:hover': {
        background: 'rgba(0, 0, 0, 0.1)',
        color: '#f6f6f6',
        borderRadius: '4px 4px 0 0',
      },
    },
    headerLeftItemAvatarIcon: {
      fontSize: '16px',
      marginRight: '5px',
      width: theme.spacing(4),
      height: theme.spacing(4),
    },
    dialog_text: {
      width: '300px',
    },
  })
)

export default function MainTap({ collapsed, onMenuLeftShow = () => {} }) {
  const history = useHistory()
  const [headerLeftDataAction, setHeaderLeftDataAction] = useState(1)
  const headerLeftData = [
    { id: 1, name: '系统管理' },
    { id: 2, name: '系统监控' },
    { id: 3, name: '系统工具' },
  ]
  const headerRightData = [
    { id: 12, name: '文档' },
    { id: 22, name: '锁屏' },
    { id: 32, name: '全屏' },
  ]
  const classes = useStyles()
  const [anchorEl, setAnchorEl] = React.useState(null)

  /**
   * @description: 打开摊开
   */
  const handleClick = (event) => {
    setAnchorEl(event.currentTarget)
  }

  /**
   * @description: 关闭弹框
   */
  const handleClose = () => {
    setAnchorEl(null)
  }

  const [open, setOpen] = React.useState(false)

  /**
   * @description: 控制提示
   */
  const onDialogOpen = (value) => {
    setOpen(value)
  }

  return (
    <>
      <div className={classes.header}>
        <div className={classes.headerLeft}>
          <div className={classes.menuBtn} onClick={onMenuLeftShow}>
            {collapsed ? <FormatIndentIncreaseIcon /> : <FormatIndentDecreaseIcon />}
          </div>
          {headerLeftData.map((v) => {
            return (
              <div
                className={headerLeftDataAction === v.id ? classes.headerLeftItemAction : classes.headerLeftItem}
                key={v.id}
              >
                <BrightnessLowIcon className={classes.headerLeftItemIcon} />
                {v.name}
              </div>
            )
          })}
        </div>
        <div className={classes.headerRight}>
          {headerRightData.map((v) => {
            return (
              <div className={classes.headerLeftItem} key={v.id}>
                <BrightnessLowIcon className={classes.headerLeftItemIcon} type='setting' />
                {v.name}
              </div>
            )
          })}
          <div
            aria-controls='customized-menu'
            aria-haspopup='true'
            onClick={handleClick}
            className={classes.headerLeftItemAvatar}
          >
            <Avatar className={classes.headerLeftItemAvatarIcon} src='http://demo.ruoyi.vip/img/profile.jpg' />
            若依
          </div>
          <StyledMenu
            id='customized-menu'
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
            onClose={handleClose}
          >
            <StyledMenuItem>
              <ListItemText primary='个人中心' />
            </StyledMenuItem>
            <Divider />
            <StyledMenuItem
              onClick={() => {
                // history.replace('/')
                onDialogOpen(true)
              }}
            >
              <ListItemText primary='退出账号' />
            </StyledMenuItem>
          </StyledMenu>
        </div>
      </div>

      <HeaderTabs />
      <Dialog
        open={open}
        TransitionComponent={Transition}
        keepMounted
        onClose={() => onDialogOpen(false)}
        aria-labelledby='alert-dialog-slide-title'
        aria-describedby='alert-dialog-slide-description'
      >
        <DialogTitle id='alert-dialog-slide-title'>{'提示'}</DialogTitle>
        <DialogContent>
          <DialogContentText className={classes.dialog_text} id='alert-dialog-slide-description'>
            确定注销并退出系统吗？
          </DialogContentText>
        </DialogContent>
        <DialogActions>
          <Button onClick={() => onDialogOpen(false)} variant='outlined'>
            取消
          </Button>
          <Button
            onClick={() => {
              history.replace('/')
            }}
            variant='contained'
            color='primary'
          >
            确定
          </Button>
        </DialogActions>
      </Dialog>
    </>
  )
}
